<template>
  <div class="app-container">
    <el-divider content-position="right"><el-link type="primary">租房分期</el-link></el-divider>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd(1)"
          v-hasPermi="['financial:product:add']"
        >新增</el-button>
        <el-button
          type="danger"
          icon="el-icon-plus"
          size="mini"
          @click="jinrong"
          v-hasPermi="['financial:product:add']"
        >金融测试（二维码）</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-plus"
          size="mini"
          @click="jinrongPc"
          v-hasPermi="['financial:product:add']"
        >金融测试（pc端）</el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['financial:product:edit']"
        >修改</el-button>
      </el-col>
	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList1"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productList1" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="产品名称" align="center" prop="jrProductName" width="200"/>
      <el-table-column label="资方" align="center" prop="companyName" />
      <el-table-column label="账户信息" align="center" prop="bankName" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.bankName}}{{scope.row.bankCardNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期期限" align="center" prop="instalmentPeriod">
        <template slot-scope="scope">
          <span v-if="scope.row.instalmentPeriod == -1">无限期</span>
          <span v-if="scope.row.instalmentPeriod != -1">{{scope.row.instalmentPeriod}}个月</span>
        </template>
      </el-table-column>
      <el-table-column label="还款方式" align="center" prop="repaymentType">
        <template slot-scope="scope">
          {{scope.row.repaymentType == 1 ? '按月还款' : scope.row.repaymentType == 2 ? '按季还款' : '按租约周期还款'}}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="delFlg">
        <template slot-scope="scope">
          <span v-if="scope.row.delFlg == 0">正常</span>
          <span v-if="scope.row.delFlg == 1" style="color: red">已作废</span>
        </template>
      </el-table-column>
      <el-table-column label="授信额度" align="center" prop="creditLine" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,1)"
            v-hasPermi="['financial:product:edit']"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['financial:product:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row,1)"
            v-hasPermi="['financial:product:remove']"
            v-if="scope.row.delFlg == 0"
            style="color: red"
          >作废</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total1>0"
      :total="total1"
      :page.sync="queryParams1.pageNum"
      :limit.sync="queryParams1.pageSize"
      @pagination="getList1"
    />
    <br>
    <el-divider content-position="right"><el-link type="success">收房贷</el-link></el-divider>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd(2)"
          v-hasPermi="['financial:product:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['financial:product:edit']"
        >修改</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList2"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productList2" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="产品名称" align="center" prop="jrProductName" width="200"/>
      <el-table-column label="资方" align="center" prop="companyName" />
      <el-table-column label="账户信息" align="center" prop="bankName" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.bankName}}{{scope.row.bankCardNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期期限" align="center" prop="instalmentPeriod">
        <template slot-scope="scope">
          <span v-if="scope.row.instalmentPeriod == -1">无限期</span>
          <span v-if="scope.row.instalmentPeriod != -1">{{scope.row.instalmentPeriod}}个月</span>
        </template>
      </el-table-column>
      <el-table-column label="还款方式" align="center" prop="repaymentType">
        <template slot-scope="scope">
          {{scope.row.repaymentType == 1 ? '按月还款' : scope.row.repaymentType == 2 ? '按季还款' : '按租约周期还款'}}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="delFlg">
        <template slot-scope="scope">
          <span v-if="scope.row.delFlg == 0">正常</span>
          <span v-if="scope.row.delFlg == 1" style="color: red">已作废</span>
        </template>
      </el-table-column>
      <el-table-column label="授信额度" align="center" prop="creditLine" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,1)"
            v-hasPermi="['financial:product:edit']"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['financial:product:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row,2)"
            v-hasPermi="['financial:product:remove']"
            v-if="scope.row.delFlg == 0"
            style="color: red"
          >作废</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total2>0"
      :total="total2"
      :page.sync="queryParams2.pageNum"
      :limit.sync="queryParams2.pageSize"
      @pagination="getList2"
    />

    <br>
    <el-divider content-position="right"><el-link type="danger">应收租约保理</el-link></el-divider>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd(3)"
          v-hasPermi="['financial:product:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['financial:product:edit']"
        >修改</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList3"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productList3" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="产品名称" align="center" prop="jrProductName" width="200"/>
      <el-table-column label="资方" align="center" prop="companyName" />
      <el-table-column label="账户信息" align="center" prop="bankName" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.bankName}}{{scope.row.bankCardNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期期限" align="center" prop="instalmentPeriod">
        <template slot-scope="scope">
          <span v-if="scope.row.instalmentPeriod == -1">无限期</span>
          <span v-if="scope.row.instalmentPeriod != -1">{{scope.row.instalmentPeriod}}个月</span>
        </template>
      </el-table-column>
      <el-table-column label="还款方式" align="center" prop="repaymentType">
        <template slot-scope="scope">
          {{scope.row.repaymentType == 1 ? '按月还款' : scope.row.repaymentType == 2 ? '按季还款' : '按租约周期还款'}}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="delFlg">
        <template slot-scope="scope">
          <span v-if="scope.row.delFlg == 0">正常</span>
          <span v-if="scope.row.delFlg == 1" style="color: red">已作废</span>
        </template>
      </el-table-column>
      <el-table-column label="授信额度" align="center" prop="creditLine" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,1)"
            v-hasPermi="['financial:product:edit']"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['financial:product:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row,3)"
            v-hasPermi="['financial:product:remove']"
            v-if="scope.row.delFlg == 0"
            style="color: red"
          >作废</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total3>0"
      :total="total3"
      :page.sync="queryParams3.pageNum"
      :limit.sync="queryParams3.pageSize"
      @pagination="getList3"
    />

    <!-- 添加或修改金融产品管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <el-form :disabled="disable" ref="form" :model="form" :rules="rules" label-width="80px"  label-position="top">
          <el-form-item label="产品名称" prop="jrProductName">
            <el-input v-model="form.jrProductName" placeholder="请输入产品名称" />
          </el-form-item>
        <el-form-item label="资金提供方" prop="companyId">
            <el-select v-model="form.companyId" placeholder="请选择资金提供方">
              <el-option :label="item.label" :value="item.value" v-for="item in companys"/>
            </el-select>
        </el-form-item>
        <el-form-item label="分期期限(-1表示无限)" prop="instalmentPeriod">
            <el-radio v-model="form.instalmentPeriod"
                      :label="item.value"
                      v-for="item in instalmentPeriods">{{item.label}}</el-radio>
        </el-form-item>
        <el-form-item label="授信额度" prop="creditLine">
          <el-input v-model="form.creditLine" placeholder="请输入授信额度(单位：%，比如80%，存的是80)"/>
        </el-form-item>
        <el-form-item label="还款方式" prop="repaymentType">
          <el-select v-model="form.repaymentType" placeholder="请选择还款方式">
            <el-option :label="item.label" :value="item.value" v-for="item in repaymentTypes"/>
          </el-select>
        </el-form-item>
        <el-row v-if="payStatus">
        <el-form-item label="支付PC链接(URL)">
          <el-input v-model="form.urlPayPc" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="支付移动链接(URL)">
          <el-input v-model="form.urlPayMoble" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="补全信息PC(URL)">
          <el-input v-model="form.urlAddDetailInfoPc" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="补全信息移动(URL)">
          <el-input v-model="form.urlAddDetailInfoMobile" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="App下载(URL)">
          <el-input v-model="form.urlAppDownload" placeholder="请输入内容" />
        </el-form-item>
        </el-row>
        <!--动态-->
        <el-form-item label="银行账户类型" prop="accountType">
          <el-select v-model="form.accountType" placeholder="请选择银行账户类型" @change="selectAccountType">
            <el-option :label="item.label" :value="item.value" v-for="item in accountTypes"/>
          </el-select>
        </el-form-item>
        <el-row v-if="account">
          <el-col :span="12">
            <el-form-item label="开户行所在省" prop="bankAccountProvince">
              <el-select v-model="form.bankAccountProvince" placeholder="请选择开户行所在省">
                <el-option :label="item.regionName" :value="item.regionId" v-for="item in provinces"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行名称" prop="bankName">
              <el-input v-model="form.bankName" placeholder="请输入银行名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="accountType">
          <el-col :span="12">
            <el-form-item label="开户行(支行)" prop="openingBank">
              <el-input v-model="form.openingBank" placeholder="请输入开户行(支行)" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联行行号" prop="bankBranchCodeLh">
              <el-input v-model="form.bankBranchCodeLh" placeholder="请输入联行行号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账户姓名" v-if="account" prop="accountName">
              <el-input v-model="form.accountName" placeholder="请输入账户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行卡号" prop="bankCardNumber">
              <el-input v-model="form.bankCardNumber" placeholder="请输入银行卡号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="申请条件" prop="applicationConditions">
          <el-input type="textarea" rows="2" v-model="form.applicationConditions" placeholder="请输入申请条件" />
        </el-form-item>
        <el-form-item label="风控要求" prop="riskRequirement">
          <el-input type="textarea" rows="2" v-model="form.riskRequirement" placeholder="请输入风控要求" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      align="center"
      :visible.sync="dialogVisiblePay"
      width="20%">
      <el-image :src="payQr"></el-image><br>
      <img src="@/assets/payTestImg/ali_app.svg"><!-- 支付宝图标 --><span>请使用支付宝“扫一扫”扫码支付</span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProduct,
  getProduct,
  delProduct,
  addProduct,
  updateProduct,
  getAllBankAccountProvince,
  pay
} from '@/api/financial/product'
import ReconnectingWebSocket from 'reconnectingwebsocket'

export default {
  name: "Product",
  components: {
  },
  data() {
    return {
      dialogVisiblePay:false,
      payQr:null,
      payForm: {
        wayCode: 'ALI_QR',
        amount: 100,
        currency: 'CNY',
        subject: 'vue测试',
        body: 'vue描述',
        notifyUrl: 'http://43.142.33.78:9218/api/anon/paytestNotify/payOrder',
        payDataType: 'codeImgUrl'
      },
      payFormPc: {
        wayCode: 'ALI_PC',
        amount: 100,
        currency: 'CNY',
        subject: 'pc测试',
        body: 'pc描述',
        notifyUrl: 'http://43.142.33.78:9218/api/anon/paytestNotify/payOrder',
        payDataType: 'payurl'
      },
      // 是否禁用
      disable:false,
      // 开户行所在省
      provinces:[],
      // 资方：
      instalmentPeriods:[
        {label:'12个月',value:12},
        {label:'24个月',value:24},
        {label:'无限期',value:-1}
      ],
      // 资方：
      companys:[
        {label:'樱花分期',value:1},
        {label:'久金所',value:2},
        {label:'应花',value:3}
      ],
      // 所有还款方式：
      repaymentTypes:[
        {label:'按月还款',value:1},
        {label:'按季度还款',value:2},
        {label:'按租约周期还款',value:3}
      ],
      // 所有账户类型：
      accountTypes:[
        {label:'对私账户',value:1},
        {label:'对公账户',value:2}
      ],
      // 是否显示支付地址
      payStatus:false,
      // 账户选择标识
      account:false,
      // 账户选择标识
      accountType:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total1: 0,
      // 总条数
      total2: 0,
      // 总条数
      total3: 0,
      // 租房分期表格数据
      productList1: [],
      // 收房贷表格数据
      productList2: [],
      // 应收租约保理表格数据
      productList3: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数1
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        jrProductType: null
      },
      // 查询参数2
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        jrProductType: null
      },
      // 查询参数3
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        jrProductType: null
      },
      // 表单参数
      form: {
        jrProductType:null,
        instalmentPeriod:''
      },
      // 表单校验
      rules: {
        jrProductName:[
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        companyId:[
          { required: true, message: '请选择资金提供方', trigger: 'change' }
        ],
        instalmentPeriod:[
          { required: true, message: '请选择分期期限', trigger: 'change' }
        ],
        creditLine:[
          { required: true, message: '请输入授信额度', trigger: 'blur' }
        ],
        repaymentType:[
          { required: true, message: '请输入还款方式', trigger: 'blur' }
        ],
        accountType:[
          { required: true, message: '请选择银行账户类型', trigger: 'change' }
        ],
        bankAccountProvince:[
          { required: true, message: '请选择开户行所在省', trigger: 'change' }
        ],
        bankName:[
          { required: true, message: '请输入银行名称', trigger: 'blur' }
        ],
        openingBank:[
          { required: true, message: '请输入开户行', trigger: 'blur' }
        ],
        bankBranchCodeLh:[
          { required: true, message: '请输入联行行号', trigger: 'blur' }
        ],
        accountName:[
          { required: true, message: '请输入账户姓名', trigger: 'blur' }
        ],
        bankCardNumber:[
          { required: true, message: '请输入银行卡号', trigger: 'blur' }
        ],
        applicationConditions:[
          { required: true, message: '请输入申请条件', trigger: 'blur' }
        ],
        riskRequirement:[
          { required: true, message: '请输入风控要求', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getList1(1);
    this.getList2(2);
    this.getList3(3);
    this.getBankAccountProvince();
  },
  methods: {
    /** 查询租房分期列表 */
    getList1() {
      this.loading = true;
      this.queryParams1.jrProductType = 1;
      listProduct(this.queryParams1).then(response => {
        this.productList1 = response.rows;
        this.total1 = response.total;
        this.loading = false;
      });
    },
    /** 查询租房分期列表 */
    getList2() {
      this.loading = true;
      this.queryParams2.jrProductType = 2;
      listProduct(this.queryParams2).then(response => {
        this.productList2 = response.rows;
        this.total2 = response.total;
        this.loading = false;
      });
    },
    /** 查询租房分期列表 */
    getList3() {
      this.loading = true;
      this.queryParams3.jrProductType = 3;
      listProduct(this.queryParams3).then(response => {
        this.productList3 = response.rows;
        this.total3 = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        jrProductName: null,
        companyId: null,
        companyName: null,
        instalmentPeriod: null,
        creditLine: null,
        jrProductType: null,
        repaymentType: null,
        urlPayPc: null,
        urlPayMoble: null,
        urlAddDetailInfoPc: null,
        urlAddDetailInfoMobile: null,
        urlAppDownload: null,
        accountType: null,
        bankCardNumber: null,
        bankId: null,
        bankName: null,
        openingBank: null,
        accountName: null,
        bankBranchCodeLh: null,
        bankAccountProvince: null,
        applicationConditions: null,
        riskRequirement: null,
        reserve1: null,
        reserve2: null,
        reserve3: null,
        reserve4: null,
        reserve5: null,
        delFlg: null,
        createUserid: null,
        createTime: null,
        updateUserid: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd(type) {
      this.reset();
      this.open = true;
      this.form.jrProductType = type;
      this.title = "添加金融产品管理";
      if (type == 1) {
        this.payStatus = true;
      }else{
        this.payStatus = false;
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row,look) {
      this.reset();
      const id = row.id || this.ids;
      if (look == 1) {
        this.disable = true;
      }else{
        this.disable = false;
      }
      getProduct(id).then(response => {
        console.log(response.data);
        this.form = response.data;
        this.open = true;
        this.selectAccountType();
        this.title = "修改金融产品管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateProduct(this.form).then(response => {
              if (response.code == 200) {
                this.msgSuccess('修改成功');
                this.open = false;
                if (this.form.jrProductType == 1) {
                  this.getList1();
                }else if(this.form.jrProductType == 2){
                  this.getList2();
                }else{
                  this.getList3();
                }
              } else {
                this.$message.error(response.msg);
              }
            });
          } else {
            addProduct(this.form).then(response => {
              if (response.code == 200) {
                this.msgSuccess('新增成功');
                this.open = false;
                if (this.form.jrProductType == 1) {
                  this.getList1();
                }else if(this.form.jrProductType == 2){
                  this.getList2();
                }else{
                  this.getList3();
                }
              } else {
                this.$message.error(response.msg);
              }
            });
          }
        }
      });
    },
    /** 作废按钮操作 */
    handleDelete(row,type) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认作废金融产品管理编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delProduct(ids);
        }).then(() => {
          switch (type) {
            case 1:
              this.getList1(); break;
            case 2:
              this.getList2(); break;
            case 3:
              this.getList3(); break;
          }
          this.msgSuccess("作废成功");
        })
    },
    selectAccountType() {
      console.log(this.form.accountType);
      this.account = true;
      if (this.form.accountType == 2) {
        this.accountType = true;
      }else{
        this.accountType = false;
      }
    },
    getBankAccountProvince() {
      getAllBankAccountProvince().then(response=>{
        this.provinces = response.data;
      });
    },
    jinrong() {
      this.dialogVisiblePay = true;
      pay(this.payForm).then(response=>{
        console.log(response);
        this.payQr = response.data.data.payData;
        // 监听响应结果
        this.payOrderWebSocket = new ReconnectingWebSocket('ws://43.142.33.78:9218/api/anon/ws/payOrder/' + response.data.data.payOrderId + '/' + new Date().getTime())
        this.payOrderWebSocket.onopen = () => {}
        this.payOrderWebSocket.onmessage = (msgObject) => {
          const resMsgObject = JSON.parse(msgObject.data)
          if (resMsgObject.state === 2) {
            this.dialogVisiblePay = false;
            this.$message.success("支付成功")
          } else {
            this.dialogVisiblePay = false;
            this.$message.error("支付失败")
          }
        }
      });
    },
    jinrongPc() {
      pay(this.payFormPc).then(response=>{
        window.open(response.data.data.payData);
      })
    }
  }
};
</script>
